<template>
  <div ref="wrapperRef" class="wrapper">
    <div :id="editorId" class="codeEditBox"></div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  defineProps,
  defineExpose,
  toRaw,
  onBeforeUnmount,
  watch,
} from 'vue';
import { pythonCompletion, sqlCompletion } from '@/utils/completion';
import * as monaco from 'monaco-editor';

const props = defineProps({
  modelValue: String, // Change the prop name to `modelValue`
  editorId: {
    type: String,
    default: 'editor',
  },
  editorTheme: {
    type: String,
    default: 'vs-dark',
  },
  language: {
    type: String,
    default: 'python',
  },
  readOnly: {
    type: Boolean,
    default: false,
  },
});

const wrapperRef = ref(null);
const editor = ref(null);
const editorValue = ref(props.modelValue); // Use modelValue as the source of truth
const editorTheme = ref('vs-dark');
const language = ref('python');
const emit = defineEmits(['update:modelValue', 'change']); // Use update:modelValue for v-model

const getEditorValue = () => {
  return toRaw(editor.value).getValue();
};

const setEditorValue = value => {
  if (editor.value) {
    toRaw(editor.value).setValue(value);
    editorValue.value = value;
    // emit("change", value); // No longer needed
  }
};

defineExpose({
  getEditorValue,
});

onMounted(() => {
  // 创建编辑器
  editor.value = monaco.editor.create(document.getElementById(props.editorId), {
    value: editorValue.value,
    language: language.value,
    theme: editorTheme.value,
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: props.readOnly,
    cursorStyle: 'line',
    automaticLayout: true,
    glyphMargin: false,
    useTabStops: false,
    fontSize: 16,
    autoIndent: true,
    quickSuggestionsDelay: 100,
  });

  // 创建代码提示
  pythonCompletion;
  sqlCompletion;

  // 监听编辑器内容变化
  editor.value.onDidChangeModelContent(() => {
    // console.log("event ->", event);
    editorValue.value = toRaw(editor.value).getValue();
    emit('update:modelValue', editorValue.value); // Use update:modelValue for v-model
    emit('change', editorValue.value);
  });

  // Watch for external changes to modelValue and update the editor
  watch(
    () => props.modelValue,
    newValue => {
      if (newValue !== editorValue.value) {
        setEditorValue(newValue);
      }
    }
  );

  // 监听wrapper大小变化来调整编辑器大小
  const wrapper = wrapperRef.value;
  const resizeEditor = () => {
    if (editor.value) {
      const { width, height } = wrapper.getBoundingClientRect();
      toRaw(editor.value).layout({ width, height });
    }
  };

  const resizeObserver = new ResizeObserver(resizeEditor);
  resizeObserver.observe(wrapper);
});

onBeforeUnmount(() => {
  if (editor.value) {
    toRaw(editor.value).dispose();
  }
});
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.codeEditBox {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: left;
}
.resultBox {
  margin-top: 50px;
  height: 400px;
}
.resultBox .resultTitle {
  color: #409eff;
}
.resultBox .result {
  font-size: 15px;
  color: #969696;
}
</style>
